<template>
  <van-tabbar
    v-model="active"
    :placeholder="true"
    :route="true"
    fixed
    @change="changeActive"
  >
    <van-tabbar-item
      v-for="(item, index) in tabbarData"
      :key="index"
      :to="item.to"
    >
      <template #icon="props">
        <div class="flex justify-center items-center flex-wrap">
          <img :src="props.active ? item.active : item.inactive" />
          <div
            class="text-12 text-center w-full mt-5"
            :style="
              props.active
                ? `color: ${item.activeColor}`
                : `color: ${item.inactiveColor}`
            "
          >
            {{ item.title }}
          </div>
        </div>
      </template>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import homeActive from "@/assets/img/icon_index_p.png";
import homeInactive from "@/assets/img/icon_index_d.png";

import historyActive from "@/assets/img/icon_history_p.png";
import historyInactive from "@/assets/img/icon_history_d.png";

import memberActive from "@/assets/img/icon_member_p.png";
import memberInactive from "@/assets/img/icon_member_d.png";

const active = ref(0);
const tabbarData = reactive([
  {
    inactive: homeInactive,
    active: homeActive,
    inactiveColor: "#4A4A52",
    activeColor: "#FFFFFF",
    title: "首页",
    to: {
      name: "Home"
    }
  },
  {
    inactive: historyInactive,
    active: historyActive,
    inactiveColor: "#4A4A52",
    activeColor: "#2614FF",
    title: "创作",
    to: {
      name: "History"
    }
  },
  {
    inactive: memberInactive,
    active: memberActive,
    inactiveColor: "#4A4A52",
    activeColor: "#2614FF",
    title: "我的",
    to: {
      name: "Member"
    }
  }
]);
const changeActive = (index: number) => {
  active.value = index;
};
</script>
